<template>
  <div class="map-page">
    <div class="header">
      <h3>腾讯地图电子围栏演示</h3>
      <div class="controls">
        <button @click="drawCircle">绘制圆形围栏</button>
        <button @click="drawRectangle">绘制矩形围栏</button>
        <button @click="drawPolygon">绘制多边形围栏</button>
        <button @click="clearAll">清除所有围栏</button>
      </div>
    </div>
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 声明全局变量
declare global {
  interface Window {
    TMap: any
    circleLayer: any
    polygonLayer: any
    rectangleLayer: any
  }
}

let map: any = null
let overlays: any[] = [] // 存储所有覆盖物

// 组件挂载时初始化地图
onMounted(() => {
  // 确保腾讯地图API已加载
  const checkTMap = setInterval(() => {
    if (typeof window.TMap !== 'undefined') {
      clearInterval(checkTMap)
      initMap()
    }
  }, 100)
})

// 初始化地图
function initMap() {
  try {
    // 定义地图中心点坐标（北京）
    var center = new window.TMap.LatLng(39.984120, 116.307484)
    // 定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new window.TMap.Map(document.getElementById('container'), {
      center: center,     // 设置地图中心点坐标
      zoom: 15,           // 设置地图缩放级别
    })
    
    console.log('腾讯地图初始化成功')
    
    // 创建覆盖物图层
    createOverlayLayers()
    
    // 添加默认的电子围栏
    setTimeout(() => {
      drawDefaultFences()
    }, 1000)
  } catch (error) {
    console.error('腾讯地图初始化失败:', error)
  }
}

// 创建覆盖物图层
function createOverlayLayers() {
  // 创建几何图形覆盖物图层
  window.circleLayer = new window.TMap.MultiCircle({
    id: 'circleLayer',
    map: map,
    styles: {
      circle: {
        color: '#FF0000', // 边框颜色
        fillColor: '#FF0000', // 填充颜色
        opacity: 0.8, // 边框透明度
        fillOpacity: 0.3, // 填充透明度
        weight: 2 // 边框宽度
      }
    },
    geometries: []
  })
  
  window.polygonLayer = new window.TMap.MultiPolygon({
    id: 'polygonLayer',
    map: map,
    styles: {
      polygon: {
        color: '#0000FF', // 边框颜色
        fillColor: '#0000FF', // 填充颜色
        opacity: 0.8, // 边框透明度
        fillOpacity: 0.3, // 填充透明度
        weight: 2 // 边框宽度
      }
    },
    geometries: []
  })
  
  window.rectangleLayer = new window.TMap.MultiPolygon({
    id: 'rectangleLayer',
    map: map,
    styles: {
      rectangle: {
        color: '#00FF00', // 边框颜色
        fillColor: '#00FF00', // 填充颜色
        opacity: 0.8, // 边框透明度
        fillOpacity: 0.3, // 填充透明度
        weight: 2 // 边框宽度
      }
    },
    geometries: []
  })
}

// 绘制默认的电子围栏
function drawDefaultFences() {
  drawCircle()
  drawRectangle()
  drawPolygon()
}

// 绘制圆形围栏
function drawCircle() {
  clearOverlays() // 清除之前的围栏
  
  // 更新圆形图层的几何图形
  window.circleLayer.setGeometries([
    {
      styleId: 'circle',
      center: new window.TMap.LatLng(39.984120, 116.307484),
      radius: 1000
    }
  ])
  
  overlays.push(window.circleLayer)
  
  // 调整地图视野以适应圆形
  var centerPoint = new window.TMap.LatLng(39.984120, 116.307484)
  var bounds = new window.TMap.LatLngBounds()
  // 计算圆的边界
  var north = new window.TMap.LatLng(centerPoint.getLat() + 0.01, centerPoint.getLng())
  var south = new window.TMap.LatLng(centerPoint.getLat() - 0.01, centerPoint.getLng())
  var east = new window.TMap.LatLng(centerPoint.getLat(), centerPoint.getLng() + 0.01)
  var west = new window.TMap.LatLng(centerPoint.getLat(), centerPoint.getLng() - 0.01)
  bounds.extend(north)
  bounds.extend(south)
  bounds.extend(east)
  bounds.extend(west)
  map.fitBounds(bounds)
}

// 绘制矩形围栏
function drawRectangle() {
  clearOverlays() // 清除之前的围栏
  
  // 创建矩形顶点
  var polygonPoints = [
    new window.TMap.LatLng(39.97, 116.29),
    new window.TMap.LatLng(39.97, 116.32),
    new window.TMap.LatLng(39.99, 116.32),
    new window.TMap.LatLng(39.99, 116.29)
  ]
  
  // 更新矩形图层的几何图形
  window.rectangleLayer.setGeometries([
    {
      styleId: 'rectangle',
      paths: polygonPoints
    }
  ])
  
  overlays.push(window.rectangleLayer)
  
  // 调整地图视野以适应矩形
  var bounds = new window.TMap.LatLngBounds()
  polygonPoints.forEach(point => {
    bounds.extend(point)
  })
  map.fitBounds(bounds)
}

// 绘制多边形围栏
function drawPolygon() {
  clearOverlays() // 清除之前的围栏
  
  // 创建多边形顶点（模拟不规则区域）
  var polygonPoints = [
    new window.TMap.LatLng(39.97, 116.29),
    new window.TMap.LatLng(39.98, 116.31),
    new window.TMap.LatLng(39.99, 116.30),
    new window.TMap.LatLng(39.985, 116.28),
    new window.TMap.LatLng(39.975, 116.27)
  ]
  
  // 更新多边形图层的几何图形
  window.polygonLayer.setGeometries([
    {
      styleId: 'polygon',
      paths: polygonPoints
    }
  ])
  
  overlays.push(window.polygonLayer)
  
  // 调整地图视野以适应多边形
  var bounds = new window.TMap.LatLngBounds()
  polygonPoints.forEach(point => {
    bounds.extend(point)
  })
  map.fitBounds(bounds)
}

// 清除所有围栏
function clearAll() {
  clearOverlays()
}

// 清除覆盖物
function clearOverlays() {
  // 清空所有图层的几何图形
  if (window.circleLayer) {
    window.circleLayer.setGeometries([])
  }
  if (window.polygonLayer) {
    window.polygonLayer.setGeometries([])
  }
  if (window.rectangleLayer) {
    window.rectangleLayer.setGeometries([])
  }
  overlays = []
}
</script>

<style scoped lang="less">
.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.header {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:hover {
  background: #40a9ff;
}

#container {
  flex: 1;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
  }
}
</style>